<template>
  <div class="drawer_wrap">
    <div v-loading="loading" class="container">
      <el-form
        ref="userForm"
        :model="userForm"
        :rules="rules"
        label-width="120px"
        class="userForm"
      >
        <el-form-item v-if="type === 'add'" label="账号" prop="userName">
          <el-input
            v-model.trim="userForm.account"
            style="width: 240px"
            maxlength="32"
            show-word-limit
            placeholder="请输入账号"
          />
        </el-form-item>
        <el-form-item label="用户名称" prop="userName">
          <el-input
            v-model.trim="userForm.userName"
            style="width: 240px"
            maxlength="32"
            show-word-limit
            placeholder="请输入用户名称"
          />
        </el-form-item>
        <el-form-item v-if="type === 'add'" label="密码" prop="passWord">
          <el-input
            v-model.trim="userForm.passWord"
            style="width: 240px"
            maxlength="32"
            show-word-limit
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select
            v-model="userForm.roleId"
            style="width: 240px"
            placeholder="请选择角色"
          >
            <el-option
              v-for="item in roleListOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="type === 'edit'" label="账号状态" prop="googleStatus">
          <el-radio-group v-model="userForm.googleStatus">
            <el-radio :label="0">未绑定</el-radio>
            <el-radio :label="1">已绑定</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model.trim="userForm.remark"
            style="width: 240px"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 8}"
            maxlength="32"
            show-word-limit
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
    </div>
    <!-- 抽屉底部栏确定取消按钮 -->
    <div class="footer-button">
      <div class="flex-button">
        <el-button
          size="small"
          type="primary"
          @click="submitDrawer"
        >确 认</el-button>
        <el-button size="small" @click="cancelDrawer">取 消</el-button>
      </div>
    </div>
  </div>

</template>

<script>
import { userInfoSave, userInfoEdit } from '@/api/userManage/users'
// import { getInfoList } from '@/api/platManage/role'
export default {
  name: 'AddRole',
  props: {
    type: {
      type: String,
      required: true
    },
    currRole: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: true,
      userForm: {
        createTime: '',
        id: '',
        passWord: '',
        remark: '',
        roleId: '',
        userName: '',
        account: '',
        googleStatus: 0
      },
      roleListOptions: [],
      rules: {
        userName: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
        passWord: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        roleId: [{ required: true, message: '请选择角色', trigger: 'change' }]
      }
    }
  },
  async mounted() {
    this.initData()
  },
  methods: {
    // 规范添加默认数据，编辑回显数据
    async initData() {
      if (this.type === 'add') {
        // 添加默认数据
      } else {
        // 编辑回显数据
        this.userForm = { ...this.currRole }
      }
      // await this.getInfoList()
      this.loading = false
    },
    // 添加角色
    async userInfoSave() {
      const params = {
        userName: this.userForm.userName,
        account: this.userForm.account,
        passWord: this.userForm.passWord,
        roleId: this.userForm.roleId ?? 0,
        remark: this.userForm.remark
      }
      try {
        const res = await userInfoSave(params)
        if (res.success) {
          this.$message.success('添加成功')
        }
      } catch (error) {
        console.log(error)
      }
    },
    // async getInfoList() {
    //   try {
    //     const res = await getInfoList()
    //     if (res.success) {
    //       this.roleListOptions = res.result.map(item => ({
    //         value: item.id,
    //         label: item.roleName
    //       }))
    //     }
    //   } catch (error) {
    //     console.log(error)
    //   }
    // },
    // 编辑角色
    async userInfoEdit() {
      const params = {
        id: this.userForm.id,
        userName: this.userForm.userName,
        account: this.userForm.account,
        googleStatus: this.userForm.googleStatus,
        remark: this.userForm.remark,
        roleId: this.userForm.roleId ?? 0
      }
      try {
        const res = await userInfoEdit(params)
        if (res.success) {
          this.$message.success('用户修改成功')
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 表单确认提交按钮事件句柄
    submitDrawer() {
      this.$refs['userForm'].validate(async(valid) => {
        if (valid) {
          this.loading = true
          if (this.type === 'add') {
            await this.userInfoSave()
          } else if (this.type === 'edit') {
            await this.userInfoEdit()
          }
          this.loading = false
          this.$emit('drawerBtnClose', true)
        } else {
          this.loading = false
          console.log('error submit!!')
          return false
        }
      })
    },
    // 表单取消提交按钮事件句柄
    cancelDrawer() {
      this.$emit('drawerBtnClose', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.drawer_wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  .container {
    flex: 1;
    overflow-y: auto;
  }
}
.footer-button {
  border-top: 1px solid #f0f0f0;
  height: 50px;
  width: 100%;
  background-color: #fff;
  z-index: 99;
  .flex-button {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    padding-right: 10px;
  }
}
// 修改index.scss label默认值
::v-deep label {
  font-weight: 500 !important;
}
</style>
